<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/commons/taglibs.jsp" %>

<title><fmt:message key="GeneratorConfig.title"/></title>
<script src="${ctx}/assets/js/bootstrap-paginator.min.js"></script>
<script>
$(".generatorConfig").addClass("active").parent("ul").parent("li").addClass("active open");
$(document).ready(function(){
	addPopup("#addButton",'${ctx}/generatorConfig/popup/create','<fmt:message key="navigation.title.create"/> <fmt:message key="GeneratorConfig.title"/>')
	editPopup(".editButton","${ctx}/generatorConfig/popup/create",'<fmt:message key="navigation.title.edit"/> <fmt:message key="GeneratorConfig.title"/>')
})
</script>
<menu><fmt:message key="menu.generator.title"/></menu>
<submenu><fmt:message key="menu.generatorConfig.title"/></submenu>
<form:form action="${ctx }/generatorConfig/list" modelAttribute="query" id="queryForm" name="queryForm" method="post" style="display: inline;" class="form-horizontal">
<fmt:message key="GeneratorConfig.configName.title" var="configNameTitle"></fmt:message>
<fmt:message key="GeneratorConfig.configValue.title" var="configValueTitle"></fmt:message>
<fmt:message key="GeneratorConfig.configDesc.title" var="configDescTitle"/>
<div class="row">
	<div class="widget-box">
		
		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">
				Search Result
				</div>
				<div>
					<table id="dynamic-table" class="table table-responsive table-striped table-bordered table-hover dataTable">
						<thead>
							<tr>
								<th style="width:1px;"> </th>								
								<th class="sorting" data-name="configName">${configNameTitle }</th>
								<th class="sorting" data-name="configValue">${configValueTitle } </th>
								<th class="sorting" data-name="configDesc">${configDescTitle } </th>
								<th><fmt:message key="navigation.label.operation"/></th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${page.content}" var="item" varStatus="status">
								<tr>
									<td data-label="序号">${page.number * page.size + status.index + 1}</td>									
									<td data-label="${configNameTitle }"><c:out value='${item.configName}'/>&nbsp;</td>
									<td data-label="${configValueTitle }"><c:out value='${item.configValue}'/>&nbsp;</td>
									<td data-label="${configDescTitle }"><c:out value='${item.configDesc}'/>&nbsp;</td>
									<td data-label="<fmt:message key="navigation.label.operation"/>">
										<div class="hidden-sm hidden-xs action-buttons">
											<a class="green editButton" id="editButton-${item.id }">
												<i class="ace-icon fa fa-pencil bigger-130"></i>
											</a>
										</div>						
									</td>
								  </tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<div class="ui-pager-control"  style="background-color:#EFF3F8">
					<table class="ui-pg-table ui-common-table ui-pager-table ">
						<tr>
							<td class="ui-pg-button ui-corner-all">
								<div class="ui-pg-div">
									<a id="addButton">
										<span class="ui-icon ace-icon fa fa-plus-circle purple"></span>
									</a>
								</div>
							</td>							
						</tr>
					</table>
					
				</div>
			</div>
			<div class="">
				<input type="hidden" name="sortColumns" id="sortColumns" value="${query.sortColumns}" />
				<input type="hidden" name="page" id="page" value="${query.page}" />
				<c:if test="${page.totalPages > 1}">
					<div class=" pull-right">
						<ul id="pagination"></ul>
					</div>
				</c:if>
			</div>
		</div>
		</div>
	
</div>

<script>
jQuery(function($) {
	addCustomPaginator('#pagination','#queryForm','#sortColumns','#page', "${query.page}","${page.totalPages}","allOrder");
	changeSort("#queryForm","#dynamic-table",'#sortColumns','#page');
	initialTableSort("#dynamic-table",'#sortColumns');
})


</script>

</form:form>